<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .goodWarmp{
            width: 500px;
            display: flex;
            justify-content:left;
            border: 1px dashed black;
        }
        .goodWarmp>div:last-child{
            text-align: left;
        }
        .detail{
            width: 200px;
            height: 200px;
            background-color: #cccccc;
            position: fixed;
            right: 10px;
            top: 100px;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div id="box">
        <child1></child1>
        <child2></child2>
    </div>
        
    <script>
       //创建中央事件总线 bus
       var bus = new Vue();
       Vue.component("child1",{
            template : `
                <div>child1-<button @click="busClick">发布详细信息</button></div>
            `,
            methods : {
                busClick(){
                    //分发一个自定义事件busEvent,并发布了信息数据
                    bus.$emit("busEvent",{name:"tom",age:19});
                }
            }
        })
        Vue.component("child2",{
            template : `
                <div>
                    <p>child2-订阅组件</p>
                    <p v-if="msg">{{msg.name}} | {{msg.age}}</p>
                </div>
            `,
            mounted(){//生命周期函数，函数触发时机：DOM渲染完毕后就会执行的函数。
                console.log("执行了")
                //监听busEvent事件的分发，从而通过回调获取发布的信息数据
                bus.$on("busEvent",(data)=>{
                    console.log("获取到详情了",data);
                    //保存数据模型状态
                    this.msg = data
                });
            },
            data(){
                return {
                    msg : null
                }
            }
        })
        var vm = new Vue({
            el : "#box"
        })
    </script>
</body>

</html>